<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue常用指令测试</title>
</head>
<body>

<div id="app">
    <!--    {{name}}-->
    <a v-bind:href="url"><span v-text="name"></span></a>
    <input type="text" v-model="num1">+
    <input type="text" v-model="num2">=
    <span v-text="result"></span>
    <!--    <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>-->
    <!--将num1数据转换为int类型进行加法运算-->
    <!--    {{Number.parseInt(num1)+Number.parseInt(num2)}} -->
    <button v-on:click="change">计算</button>
    <div v-bind:style="{fontSize:size+'px'}">{{name}}</div>
</div>
</body>

<script src="/js/vue/vue.min.js"></script>
<script>
    <!--定义VM层-->
    var VM = new Vue({
        el: "#app",             //Vue绑定app
        data: {
            name: '学成在线',
            num1: 0,             //使用v-model进行数据的双向绑定，默认值1；输入框数值改变能改变data数值，data数值改变能改变输入框数值
            num2: 0,
            result: 0,
            url: 'http://www.zztiyjw.cn',
            size: 35
        },
        //自定义方法
        methods: {
            change:function () {
                this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2)
            }
        }
    });
</script>
</html>

<!--
    Vue标签:
        v-model：支持双向绑定数据
        v-text：渲染变量值到指定元素
        v-on：绑定一个按钮的单击事件
        v-bind：将数据对象绑定在dom的任意属性中
-->